// 默认激活当前标签样式
a[2].classList.add("active")
// 获取元素
let ys =document.querySelector(".ys")
// 定义数组
let ysArr =[
    {title:"扫码认证",price:0,buys:"0"},
    {title:"4000次",price:2200,buys:"0.3000"},
    {title:"8000次",price:1600,buys:"0.4000"},
    {title:"4000次",price:1800,buys:"0.7000"}
]
// 定义字符串
let ysStr = ""
// 渲染页面
ysArr.forEach((item, i) => {
    // 字符串拼接
    ysStr += `
    <span>${item.title}</span>
    `
})
// 接收 后端数据渲染到页面
ys.innerHTML = ysStr

// 渲染到页面后拿到需要操作的元素
let spans = document.querySelectorAll(".ys>span")
// 默认激活第一个样式
spans[0].classList.add("active")
let money = document.querySelector(".money span")
let tip = document.querySelector(".money i")

// console.log(spans)
// 给每一个span 绑定点击事件    
spans.forEach((item,i) => {
    item.addEventListener("click",() => {
        // 1关联money下面的span文本内容 和 i标签文本内容
        money.innerHTML = "￥"+ysArr[i].price
        tip.innerHTML = `(约 ${ysArr[i].buys}元/次),仅限企业实名购买;`
        // 2需要修改颜色
        spans.forEach((ele,j) => {
            ele.classList.remove("active")
        })
        item.classList.add("active")
    })
    
})

// API文档
// 数组生成结构渲染到页面
// 获取要渲染页面的父容器
let idSpan = document.querySelector(".spans")
// 定义数组
let idSpanArr = [
    {title:"API文档"},
    {title:"错误码参照"},
    {title:"实例代码"},
    {title:"联系我们"}
]
// 定义空字符串 为了与模板字符串作拼接使用
let idSpanStr = ""
// 遍历从后端拿到的数组
idSpanArr.forEach((item,i) => {
    // 拼接模板字符串
    idSpanStr += `<span>${item.title}</span>`
})
// 渲染到idSpan容器下页面
idSpan.innerHTML = idSpanStr

// 获取渲染的所有span标签 div标签
let idSpans = document.querySelectorAll(".spans>span")
// 默认激活第一个样式
idSpans[0].classList.add("active")
let idDivs = document.querySelectorAll(".block>div")
// console.log(idSpans)
idSpans.forEach((item,i) => {
    // 给每一个span绑定点击事件
    item.addEventListener("click",() => {
        idSpans.forEach((j,a) => {
            j.classList.remove("active")
            idDivs[a].classList.remove("show")
        })
        item.classList.add("active")
        idDivs[i].classList.add("show")
        
    })
    
})